<template>
	<view>
		<view style="border-bottom:1rpx solid #f0f0f0">
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>

		<view class="padding-all-10" style="padding:10rpx;background-color:#f0f0f0;border-bottom:1rpx solid #f0f0f0;">
			<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{ height: height + 'px' }">
				<swiper-item v-for="(pageItm, pageidx) in tabs.length" :key="pageidx">
					<view class="row-center marginTop-50" v-if="ReservationOrderList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								暂无相关约单
							</view>
						</view>
					</view>

					<scroll-view v-else scroll-y :style="{ height: height + 'px' }"
						@scrolltolower="onPullUpLoading(idx)">
						<view class="indexBox" v-for="(item,key) in ReservationOrderList" :key="key"
							@click="navTo('/reservationorder/details?OrderID='+item.ReservationOrderID)">
							<view v-if="item.ReservationOrderState == 0" class="absolute right top fs-24"
								style="padding: 5rpx 10rpx;background-color: #dddddd;">待审核</view>
							<view v-if="item.ReservationOrderState == 1" class="absolute right top fs-24"
								style="padding: 5rpx 10rpx;background-color: #dddddd;">待开放</view>
							<view v-if="item.ReservationOrderState == 2" class="absolute right top fs-24"
								style="padding: 5rpx 10rpx;background-color: #dddddd;">开放中</view>
							<view v-if="item.ReservationOrderState == 4" class="absolute right top fs-24"
								style="padding: 5rpx 10rpx;background-color: #dddddd;">已过期</view>
							<view v-if="item.ReservationOrderState == -1" class="absolute right top fs-24"
								style="padding: 5rpx 10rpx;background-color: #dddddd;">未通过</view>

							<view class="marginTop-20">
								<view class="artInfos">
									<view class="artHeadPic">
										<head-wear :width="80" :height="80" :borderWidth="4"
											:WxHeadPic="item.Publicer.WxHeadPic" :userInfo="item.Publicer"
											:UserLevelID="item.Publicer.UserLevelID" image-width="30" image-height="20"
											size="16" right="-7" bottom="0" oneRight="0"></head-wear>
									</view>
									<view class="artInfo">
										<view class="artName">
											<text class="one-ellipsis"
												style="display: block;max-width: 90%;">{{item.Publicer.NickName}}</text>
											<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.Publicer.UserSex).text === '男'"></image>
											<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10"
												v-if="JSON.parse(item.Publicer.UserSex).text === '女'"></image>
											<auth-label v-if="item.Publicer.isAuthOk == 2" :size="18"
												height="30"></auth-label>
											<personality-label v-if="item.Publicer.BeautifulWomen == 1" :size="18"
												height="30"></personality-label>
											<image :src="baseUrl + 'icon/enterprise.png'"
												class="marginLeft-10 company-image-size"
												v-if="item.Publicer.isCompanyAuth && item.Publicer.isCompanyAuth == 1">
											</image>
										</view>
										<view class="artLabel">
											<text>
												<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
													{{ roleitem.LabelName }}
													<text v-if="roleindex < item.PublicRoles.length-1">，</text>
												</text>
											</text>
											<text class="geline">|</text>
											<text class="artAddr">{{ item.Publicer.UserCity }}</text>
										</view>
									</view>
									<view class="artState">
										<view class="fs-24" v-if="item.Publicer.isOnline == 1">在线</view>
										<view class="fs-24" v-else>
											{{ $common.timeDiff(item.Publicer.onlineTime,new Date()) }}来过
										</view>
									</view>
								</view>


								<view class="flexbc marginTop-10">
									<view class="noticeTitle">
										<text>约{{ item.ClassName }}</text>
										<text style="margin-left:0rpx">・</text>
										<text v-if="JSON.parse(item.PriceType).value === 1">
											<text>¥</text>
											<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
											<text v-else>{{ item.StartPrice|formatPrice }} ~
												{{ item.EndPrice|formatPrice }}</text>
											<text>{{ JSON.parse(item.Unit).text}}</text>
										</text>
										<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
									</view>
									<view>{{ item.Publicer.city }}</view>
								</view>
								<view class="flexbc">
									<view class="leftTexts">
										<view class="fs-24 paddingTop-10 paddingBottom-10" style="color:#999;">
											{{item.ReservationOrderMemo}}
										</view>
									</view>
								</view>
							</view>
							<view class="artPics" v-if="JSON.parse(item.ReservationOrderPics).length > 0"
								@click.stop="showPhoto(JSON.parse(item.ReservationOrderPics))">
								<view class="artPicCount" v-if="JSON.parse(item.ReservationOrderPics).length > 3">
									{{ JSON.parse(item.ReservationOrderPics).length }}</view>
								<view class="artPic" v-for="(itm,idx) in JSON.parse(item.ReservationOrderPics)"
									:key="idx" v-if="idx < 3">
									<view style="width:200rpx;height:210rpx;">
										<zero-lazy-load borderRadius="10" height="210" :image="itm"
											imgMode='aspectFill'></zero-lazy-load>
									</view>
								</view>
							</view>
							<view style="height:auto" v-if="JSON.parse(item.ReservationOrderVideos).length > 0">
								<view v-for="(itm,idx) in JSON.parse(item.ReservationOrderVideos)" :key="idx">
									<video id="video" @play="play" @fullscreenchange="fullscreenchange" :src="itm"
										style="width:600rpx;height:360rpx" />
								</view>
							</view>
							<view class="indexBoxBottom flexbc">
								<view>{{ $common.timeDiff(item.addTime,new Date()) }}</view>
								<view class="indexBoxCount flexbc">
									<view class="getBaoming">
										<image :src="baseUrl + 'icon/mail.png'"
											style="width:25rpx;height:25rpx;margin-right:10rpx"></image>
										<text>{{ item.BaomingCount }}</text>
									</view>
									<view class="readcount">
										<image :src="baseUrl + 'icon/show.png'"
											style="width:30rpx;height:30rpx;margin-right:10rpx"></image>
										<text>{{ item.ReadCount }}</text>
									</view>
								</view>
							</view>
							<view class="row-end marginTop-20">
								<button
									style="font-size:24rpx;color: #333;width: 120rpx;height: 60rpx;margin:0;margin-right:10rpx;text-align:center;line-height:60rpx"
									@click.stop="onDelete(item.ReservationOrderID)">
									删除
								</button>

								<button v-if="item.ReservationOrderState == 2"
									style="color: #333;width: 120rpx;font-size:24rpx;height: 60rpx;margin:0;margin-left:10rpx;text-align:center;line-height:60rpx"
									:style="[{backgroundColor:item.ReservationOrderState != 2? '#FFDD00' : '' }]"
									@click.stop="onRefresh(item.ReservationOrderID)">
									刷新
								</button>

								<button
									style="background-color: #FFDD00;font-size:24rpx;color: #333;height: 60rpx;margin:0;margin-left:10rpx; text-align:center;line-height:60rpx"
									v-if="item.ReservationOrderState === 1"
									@click.stop="navTo(`/myPages/pages/signUpReservationorder?ReservationOrderID=${item.ReservationOrderID}`)">
									管理约单
								</button>
							</view>
						</view>
						<view class="" style="height: 200rpx;">
							<uni-load-more :status="more"></uni-load-more>
						</view>

					</scroll-view>
				</swiper-item>
			</swiper>


		</view>
		<view class="" style="height: 100rpx;"></view>
		<view class="publicBottom flexbc">
			<button class="backBtn" @click="$common.goSwtPage('/pages/index/index')">返回首页</button>
			<button class="publicBtn"
				@click="$common.goNavPage('/releasePages/pages/publicReservationOrder')">发布新约单</button>
		</view>
		<fui-gallery :urls="photoUrls" :show="photoShow" @hide="hideGallery"></fui-gallery>

	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"

	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear
		},
		data() {
			return {
				tabs: [{
						index: 0,
						id: 10000,
						name: '全部'
					},
					{
						index: 1,
						id: 0,
						name: '待审核'
					},
					{
						index: 2,
						id: 2,
						name: '开放中'
					},
					{
						index: 3,
						id: -1,
						name: '未通过审核'
					},
					{
						index: 4,
						id: 4,
						name: '已过期'
					},
				],
				ReservationOrderList: [],
				ListType: 10000,
				photoUrls: [],
				photoShow: false,
				height: 0,
				tabIndex: 0,
				page: 1,
				more: 'more',
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.loadDataOne();
		},
		onShow() {
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(260);
		},
		methods: {
			// 上拉加载
			onPullUpLoading() {
				this.page += 1;
				this.loadData()
			},
			// 二级tab
			tabChange(event) {
				this.page = 1;
				this.ReservationOrderList = [];
				this.tabIndex = event.detail.current;
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			onDelete(id) {
				uni.showModal({
					title: '确认删除吗？',
					success: res => {
						if (res.confirm) {
							this.$httpost('/ReservationOrders/DeleteReservationOrders', {
								ReservationOrderID: id
							}).then(res => {
								// console.log(res)
								if (res.code == 200) {
									this.loadDataOne()
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
								}
							})
						}
					}
				})
			},
			getMyWallet() {
				return new Promise((reslove, reject) => {
					this.$httpost('/UserCenter/myWallet', {}).then(res => {
						// console.log('mywallet', res);
						if (res.code == 200) {
							reslove(res.data.WalletYue)
						}
					});
				})
			},

			async onRefresh(id) {
				const myWallet = await this.getMyWallet();
				// console.log('myWallet', myWallet);

				if (Number(myWallet) < 5) {
					uni.showModal({
						title: '您当前余额不足！',
						confirmText: '去充值',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.$common.goNavPage('/myPages/pages/reCharge')
							}
						}
					})
					return false;
				}

				uni.showModal({
					title: '温馨提示！',
					content: '刷新将会上升您的排名，此次刷新会消耗5个金币！',
					success: res => {
						if (res.confirm) {
							this.$httpost('/ReservationOrders/RefreshReservationOrders', {
								ReservationOrderID: id
							}).then(res => {
								// console.log(res)

								if (res.code == 200) {
									this.loadDataOne()
									uni.showToast({
										title: '刷新成功',
										icon: 'success'
									})
								}
							})
						}
					}
				})

			},
			loadDataOne() {
				uni.showLoading({
					title: "加载中"
				})
				this.more = 'loading';
				this.$httpost('/UserCenter/myYuedan', {
					ListType: this.ListType,
					page: 1
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						this.ReservationOrderList = res.data.ReservationOrderList;
						this.more = 'onMore';
						uni.hideLoading()
					}
				});
			},

			loadData() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myYuedan', {
					ListType: this.ListType,
					page: this.page
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						if (this.ReservationOrderList.length != 0) {
							this.ReservationOrderList = [...this.ReservationOrderList, ...res.data
								.ReservationOrderList
							];
							if (res.data.ReservationOrderList.length == 0) this.more = 'onMore';
						} else {
							this.ReservationOrderList = res.data.ReservationOrderList;
							this.more = '';
						}
					}
				});
			},
			changeTabs(e) {
				this.ReservationOrderList = [];
				this.page = 1;
				this.ListType = e.id;
				this.tabIndex = e.index;
				this.loadDataOne();
			},
			showPhoto(photos) {
				// console.log(photos);
				this.photoUrls = photos;
				this.photoShow = true;
			},
			hideGallery() {
				this.photoShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		position: relative;
	}

	.artInfos {
		height: 80rpx;
	}

	.artHeadPic {
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
	}

	.artLabel {
		font-size: 20rpx;
		color: #999;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.artState {
		width: 100rpx;
		float: right;
		text-align: right;
		color: #999;
		font-size: 24rpx;
	}

	.artPics {
		clear: both;
		position: relative;
		display: flex;
		margin-top: 20rpx;
	}

	.artPic {
		width: 200rpx;
		height: 210rpx;
		background-color: #e0e0e0;
		margin: 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.artPic image {
		width: 100%;
		height: 210rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 50;
		bottom: 20rpx;
		right: 10rpx;
		width: 50rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		width: 220rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		text-align: center;
	}

	.readcount {
		width: 100rpx;
		text-align: center;
	}

	.publicBottom {
		position: fixed;
		bottom: 0rpx;
		width: 100vw;
		height: 100rpx;
		background-color: #FFF;
	}

	.publicBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 115rpx;
		background-color: #FFF;
		padding-top: 20rpx;
	}

	.backBtn {
		flex: 1;
		height: 70rpx;
		background-color: #f0f0f0;
		color: #000;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-left: 20rpx;
	}

	.publicBtn {
		flex: 1;
		height: 70rpx;
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
</style>